<template>
  <div class="user-manager-container">
        <el-form inline :model="queryForm"  style="text-align: left; position: relative;">
          <el-form-item label="员工姓名">
            <el-input v-model="queryForm.ename" placeholder="请输入员工姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getTableData()">查询</el-button>
          </el-form-item>
          <el-form-item style="float: right;">
            <el-button-group>
              <el-button type="primary" @click="openDialog">新增</el-button>
              <el-button type="primary" @click="getOne">编辑</el-button>
          </el-button-group>

          </el-form-item>
        </el-form>


        <el-table
          ref="multipleTable"
          :data="userList"
          tooltip-effect="dark"
          style="width: 100%"
           height="450px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="账号" width="120">
            <template slot-scope="scope">{{ scope.row.userid }}</template>
          </el-table-column>
          <el-table-column label="员工号" width="100">
            <template slot-scope="scope">{{ scope.row.empno }}</template>
          </el-table-column>
          <el-table-column label="员工姓名" width="100">
            <template slot-scope="scope">{{ scope.row.ename }}</template>
          </el-table-column>
          <el-table-column label="角色" >
            <template slot-scope="scope">{{ scope.row.rolenames }}</template>
          </el-table-column>
          <el-table-column label="所在部门" >
            <template slot-scope="scope">{{ mapDname(scope.row) }}</template>
          </el-table-column>
          <el-table-column label="管理仓库">
            <template slot-scope="scope">{{ scope.row.warehousename || '无' }}</template>
          </el-table-column>
          <el-table-column label="操作" >
            <template slot-scope="scope">
              <el-button type="text" @click="handleResetPwd(scope.row.userid)">重置密码</el-button>
            </template>
          </el-table-column>
        </el-table>

        
        <el-pagination    
          background 
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange" 
          :page-sizes="[5,7,10,15]"  
          layout="prev, pager, next,total, sizes,jumper" 
          :page-size="queryForm.limit"
          style="margin-top: 20px;text-align: right;" 
          :total="total"
        ></el-pagination>

   
    <user-info 
      :isShow="visible" 
      :newEmpList="newEmpList" 
      :roleList="roleList" 
      :userInfo="userForm" 
      @closeDialog="setIsShow" 
      @userSave="tableLoad"
    ></user-info>
  </div>
</template>

<script>
import UserInfo from '@/components/UserInfo.vue'

export default {
  name: 'UserManager',
  components: { UserInfo },
  data() {
    return {
      userList: [],
      checkedUserList: [],
      queryForm: {
        ename: '',
        page: 1,
        limit: 5
      },
      newEmpList: [],
      roleList: [],
      total: 0,
      visible: false,
      userForm: {}
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.checkedUserList = val;
    },

    getTableData() {
      this.$http.post("/getUsers", this.queryForm).then(res => {
        this.userList = res.data.data || [];
        console.log(res.data.data)
        this.total = res.data.count || 0;
      });
    },

    getNewEmpList() {
      this.$http.get("/getNewEmps").then(res => {
        this.newEmpList = res.data || [];
      });
    },

    getRoleList() {
      this.$http.get("/getRoleLists").then(res => {
        
        this.roleList = res.data || [];
      });
    },

    mapDname(type) {
      if (!Object.keys(type).includes('dname')) {
        if (type.rolenames.includes('总经理')) {
          return ''
        } else {
          return '暂无部门'
        }
      } else {
        return type.dname
      }
    },

    openDialog() {
      this.userForm = {
        userid: '',
        empno: null,
        roleIds: [],
        warehouseid: []
      };
      this.visible = true;
      this.getNewEmpList();
    },

    setIsShow() {
      this.visible = false;
    },

    getOne() {
      if (this.checkedUserList.length === 0) {
        this.$message.warning("请选择要修改的信息");
        return;
      }
      if (this.checkedUserList.length > 1) {
        this.$message.warning("只能选择一条数据");
        return;
      }

      let userid = this.checkedUserList[0].userid;
      this.$http.get(`/getOneUser?userid=` + userid).then(res => {
        
        this.userForm = res.data || {};
        this.visible = true;
      });
    },

    tableLoad(msg) {
      if (msg === 'success') {
        this.visible = false;
        this.$message.success("用户信息保存成功");
        this.getTableData();
        this.getNewEmpList();
      }
    },

    handleSizeChange(val) {
      this.queryForm.limit = val;
      this.getTableData();
    },

    handleCurrentChange(val) {
      this.queryForm.page = val;
      this.getTableData();
    },

    handleResetPwd(userid) {
      this.$confirm('确定要重置密码吗？重置后为88888888', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.get('/resetPwd', {
         params: {
            userid: userid
          }
        }).then(res => {
          if (res.data === 'success') {
            this.$message.success("密码重置成功");
          } else {
            this.$message.error("密码重置失败");
          }
        });
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消重置' });
      });
    }
  },

  created() {
    this.getTableData();
    this.getNewEmpList();
    this.getRoleList();
  }
}
</script>